<template>
  <div class="add_word_wrapper">
    <div class="add_word_inner" style="padding: 30px;">


      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-form-item label="单词" >
          <el-input v-model="word.src"></el-input>
        </el-form-item>
        <el-form-item label="翻译">
          <el-input v-model="word.tgt"></el-input>
        </el-form-item>
        <el-form-item label="程度">
          <el-select v-model="word.imp" filterable placeholder="重要度">
            <el-option v-for="item in imps" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
          <el-select v-model="word.cmd" filterable placeholder="熟练度" style="">
            <el-option v-for="item in cmds" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="特征">
          <el-select style="width: 100%;" v-model="word.features" multiple filterable allow-create default-first-option placeholder="请选择文章标签">
            <el-option v-for="item in sys_features" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加特征" style="">
          <div class="add_feature_wrapper">
            <div class="add_feature_inner" style="display: flex;">
              <el-input placeholder="请输入内容" v-model="feature_input" clearable style="margin-right: 0px;"></el-input>
              <div style="padding-left: 10px;">
                <el-button type="primary" icon="el-icon-edit" circle @click="addFeature"></el-button>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" icon=""  @click="" style="width: 100%;" @click="addWord">添加单词</el-button>
        </el-form-item>
      </el-form>



    </div>
  </div>
</template>

<script>
  import {mapGetters, mapState} from 'vuex';
  import {postRequest} from "../utils/api";

  export default {
    name: "AddWord",
    computed:{
      ...mapState(['sys_features']),
      ...mapGetters({asd:'inc_inc'})
    },
    data(){
      return {
        feature_input: '',
        imps: ['保留','很重要','重要','不重要'],
        cmds: ['保留','很熟练','熟练','不熟练'],
        word: {
          src: 'src',
          tgt: 'tgt',
          features: [],
          imp: '保留',
          cmd: '保留'
        },
        formLabelWidth: '120px',
        imageUrl:''
      }
    },
    methods: {
      addFeature(){
        this.word.features.push(this.feature_input)
        this.feature_input = ''
      },
      addWord(){
        let param = {
          src: this.word.src,
          tgt: this.word.tgt,
          imp: this.word.imp,
          cmd: this.word.cmd,
          feature_strs: this.word.features,
          token: window.localStorage.getItem(("token"))
        }
        postRequest('word_consumer/add_word', param).then(res=>{
          this.$message({showClose: true, message: JSON.stringify(res), type: 'success'})
        }).catch(err=>{
          this.$message({showClose: true, message: JSON.stringify(err), type: 'error'})
        })
      }
    }
  }
</script>

<style scoped>

</style>
